<!--
 * @Date: 2023-06-20 18:15:44
 * @作者: 七星玉蘅
 * @邮箱: 1532250426@qq.com
 * @LastEditTime: 2023-06-23 17:33:00
 * @FilePath: \kaifamiao\client\src\components\HelloWorld.vue
-->
<template>
  <div style="background: url('../assets/bj.jpg') no-repeat;background-position: center;background-size: cover;">
    <div class="top">
      <div style="width:200px" class="top-body">直接开摆-喵了个喵</div>
      <div>
        <div class="top-body">
          剩余：{{ total }}个
        </div>

        <div class="top-body">
          用时：00:00:09
        </div>

        <div class="top-body">
          总分:：20
        </div>
      </div>
      <div style="width:200px" class="top-body">排行榜</div>
      <div class="input">
        <input id="input" type="number" v-model="inputNumber" placeholder="输入数字">
        <!-- <p>输入数字的乘积为: <strong>{{ product }}</strong></p> -->
      </div>
    </div>

    <div style="position: relative;width: 80%;height: 900px;">
      <div class="box">
        <!-- 生成n*n的序列 -->
        <div class="box-item" v-for="(item, index) in product" :key="index">
          <img :src="'/assets/' + icons[Math.floor(Math.random() * inputNumber)]" :title="'sdad' + (index + 1)"
            style="100%" />
        </div>


      </div>
    </div>

    <div class="foot">
      <div class="box-item" v-for="item in 7">
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, computed, watch } from "vue";

const icons = [
  "1.png",
  "2.png",
  "3.png",
  "4.png",
  "5.png",
  "6.png",
  "7.png",
  "8.png",
  "9.png",
]



const inputNumber = ref(9);  // 输入的数字，默认为9
const product = computed(() => inputNumber.value * inputNumber.value);  // 数字的乘积



watch(
  inputNumber,

  (count, prevCount) => {
    var box = document.querySelector(".box")
    box.style.width = count * 40 + `px`;
  }
)







</script>

<style scoped lang="scss">
.top {
  width: 50%;
  margin: 0 auto;
  left: 45%;
  top: 0px;

  .top-body {
    margin: 0 auto;
    width: 200px;
    display: flex;
    justify-content: center;
  }
}

.box {
  opacity: 0.8;
  display: flex;
  flex-wrap: wrap;
  width: 360px;
  border-radius: 15px;
  margin: 0 auto;
  background: #fff;
  padding: 30px;
  position: absolute;
  box-sizing: content-box;
  // top: 10%;
  left: 50%;
  // transform: translateX(-50%) translateY(-50%);

  .box-item {
    position: relative;
    width: 30px;
    height: 30px;
    margin: 5px 5px;
    background-color: white;
    cursor: pointer;
  }

  .box-item:hover::before {
    content: attr(title);
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px;
    background-color: #000;
    color: #fff;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
  }

}


.foot {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  border-radius: 15px;
  margin: 0 auto;
  background: #FFE4B5;
  padding: 30px;
  position: absolute;
  box-sizing: content-box;
  bottom: 10%;
  left: 42%;
  // transform: translateX(-50%) translateY(-50%);

  .box-item {
    width: 30px;
    height: 30px;
    margin: 5px 5px;
    border: 1px solid black;
  }
}

.box-item img {
  width: 30px;
}

.input {
  margin: 10px 0;
}
</style>